<!-- 合作商管理 -->
<template>
  <div>
    <Tab :show-partner="showPartner" @searchPartner="searchPartner" />
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix" style="border-bottom: none;">
        <el-button class="leftBtn" type="warning" icon="el-icon-circle-plus-outline" @click="partnerVisible=true">新增</el-button>
      </div>
      <el-table :data="list">
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="合作商名称" width="130" prop="name" />
        <el-table-column label="账号" width="120" prop="account" />
        <el-table-column label="设备数量" width="120" prop="vmCount" />
        <el-table-column label="分成比例" width="120" prop="ratio">
          <template #default="scope">
            {{ `${scope.row.ratio}%` }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" width="120" prop="contact" />
        <el-table-column label="联系电话" width="130" prop="mobile" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="pwdFn(scope.row.id)">重置密码</el-button>
            <el-button type="text">查看详情</el-button>
            <el-button type="text" @click="updateFn(scope.row.id)">修改</el-button>
            <el-button type="text" style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TabfooterBtn
        :params="params"
        :total-count="totalCount"
        :total-page="totalPage"
        @nextPageFn="pageFn"
        @prevPageFn="pageFn"
      />
    </el-card>
    <PartnerDialog ref="partnerDialogRef" :partner-visible="partnerVisible" @closeFn="closeFn" @addPartnerFn="addPartnerFn" />
  </div>
</template>

<script>
import Tab from './components/header.vue'
import PartnerDialog from './components/partnerDialog.vue'
import { partnerSearch, resetPwd } from '@/api'
export default {
  components: {
    Tab,
    PartnerDialog
  },
  data() {
    return {
      showPartner: true,
      totalPage: 0,
      totalCount: 0,
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      list: [],
      partnerVisible: false
    }
  },
  created() {
    this.fetchPartner(this.params)
  },
  methods: {
    async fetchPartner(obj) {
      const res = await partnerSearch(obj)
      // console.log(res)
      this.list = res.data.currentPageRecords
      this.totalCount = +res.data.totalCount
      this.totalPage = +res.data.totalPage
    },
    // 切换页面
    pageFn(val) {
      this.params.pageIndex = val
      this.fetchNode(this.params)
    },
    // 合作商页面搜索
    searchPartner(obj) {
      this.fetchPartner({
        ...this.params,
        ...obj
      })
    },
    // 弹窗关闭
    closeFn() {
      this.partnerVisible = false
    },
    // 新增页面
    addPartnerFn() {
      this.fetchPartner(this.params)
    },
    // 重置密码
    async pwdFn(id) {
      this.$confirm('确定要重置合作商密码？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await resetPwd(id)
          this.$message.success('重置成功')
          // done()
        })
        .catch(() => {})
    },
    // 修改
    updateFn(id) {
      this.partnerVisible = true
      // console.log(this.$refs.nodeDialogRef)
      this.$refs.partnerDialogRef.updataOpenFn(id)
    }
  }
}

</script>
<style lang='scss' scoped>
.clearfix {

  .leftBtn {
    float: left;
    padding: 3px 0;
    height: 40px;
    width: 100px;
  }
}
::v-deep .el-card__header {
    border-bottom: none;
}
</style>
